<template>
    <div>
        {{msg}}
    </div>
</template>

<script>
import axios from "axios"
import MyButton from "../3.21/myButton.vue"
export default {
    components:{
    axios
    },
    data() {
        return{
            msg:1,
            myInterval:undefined,
        }
    },
    methods:{},
    beforeCreate(){
        console.log("beforeCreate,初始化钱,不能访问数据",this.msg)

    },
    Create(){
        console.log("Create,vue实例创建完成,可以访问数据",this.msg)

    },
    beforeMont(){
        console.log("beforeMount,虚拟DOM准备完毕，开始渲染")

    },
    mounted(){
        console.log("mounted,挂载完成，可以看到界面样式")
        this.myInterval=setInterval(() =>  {
            this.msg=this.msg+1
        }, 1000);
    },
    beforeCreate(){
        console.log(
            "beforeUpdate,界面更新之前，数据新,界面旧，在此钩子更新数据不会造成重复渲染",
            this.msg
        )
        this.msg+=1
    },
    updated(){
        console.log("updated,界面更新之后，数据新，界面新",this.msg)
    },
    beforeDestroy(){
        console.log(
            "beforeDestroy,vue实例销毁前(该组件销毁前),可以获取数据",
            this.msg
        )
        clearInterval(this.myInterval)
    },
    destroyed(){
        console.log(
            "destroyed,销毁后，数据绑定与监听被移除,子实例都会被销毁",
            this.msg
        )
    },
}
</script>